<!DOCTYPE html>
<html>
	<head>
		<title>Home</title>
		<!--bootstarp-css-->
		<link href="../css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
		<!--/bootstarp-css -->
		<!--css-->
		<link rel="stylesheet" href="../css/style.css" type="text/css" media="all" />
		<link href="../css/hover.css" rel="stylesheet" media="all">
		<script src="../js/jquery-3.2.1.min.js"></script>
		<script src="../js/bootstrap.min.js"></script>
		<!--领养-->
		<style>
			#search-top {
				z-index: 9999;
				background: #fff;
				padding: 10px;
			}

			#search-top .input-group-addon {
				border-radius: 0;
			}

			#loadLocation {
				border-right: none;
				color: #ff6735;
			}

			.panel-body {
				padding: 0 10px;
			}

			.panel-body .radio {
				padding-left: 30px;
			}

			label {
				font-weight: normal;
			}

			.page-container {
				width: 970px;
				margin: 10px auto;
			}

			.search-city {
				padding-right: 5px;
			}

			#addPost {
				margin-top: 80px;
			}

			#lingyang-list2 {
				margin: 10px 0;
			}

			#lingyang-list2 li {
				background: #fff;
				padding: 10px;
				position: relative;
			}

			#lingyang-list2 a:hover {
				text-decoration: none;
			}

			#lingyang-list2 .media-heading {
				height: 30px;
				line-height: 30px;
				font-size: 14px;
				;
				overflow: hidden;
				margin-bottom: 10px;
			}

			#lingyang-list2 .address {
				color: #999;
			}

			#lingyangList_page .fabu-btn {
				margin-bottom: 10px;
			}

			#lingyangList_page .panel {
				margin-bottom: 10px;
			}

			.ly-cell-con .media-heading .btn {
				position: absolute;
				left: 5px;
			}

			.ly-cell-con .figure .btn {
				position: absolute;
			}

			.xs-button {
				margin: 10px 10px 0;
				width: auto;
			}

			/* 筛选标签卡 */
			.mobile-nav .filter {
				/* font 16 */
				background: #f4f4f4;
				width: 100%;
				z-index: 1;
			}

			.mobile-nav .filter li {
				/* font 14 */
				float: left;
				width: 25%;
				text-align: center;
				font-size: 0.875em;
				height: 39px;
				line-height: 39px;
				padding-bottom: 1px;
				border-right: 1px solid #e4e4e4;
				border-bottom: 1px solid #e4e4e4;
			}

			.mobile-nav .filter li:last-child {
				border-right: none;
			}

			.mobile-nav .filter li a {
				font-size: 14px;
				color: #333;
				display: block;
			}

			.mobile-nav ul {
				margin-bottom: 0;
			}

			.mobile-nav li.filter_active {
				padding-bottom: 0;
				border-bottom-width: 2px;
				border-bottom-color: #ff9900;
			}

			.mobile-nav .f_condition a {
				display: block;
				text-indent: -10%;
				height: 39px;
				line-height: 39px;
				padding-bottom: 1px;

				background: url() no-repeat 74% 50%;
				background-size: 6px 9px;
			}

			.mobile-nav .f_condition_act a {
				background-image: url();
			}

			.mobile-nav .param-check-box {
				padding: 10px;
				background: #fff;
			}

			.param-check-box {
				position: relative;
				border-bottom: 1px solid #f1f2f4;
				padding-left: 5px;
			}

			.param-check-box ul {
				padding-top: 10px;
				padding-bottom: 0;
				margin-bottom: 0;
			}

			.param-check-box ul>li {
				line-height: 35px;
				margin-bottom: 10px;
			}

			.param-check-box ul>li input[type="radio"] {
				display: none;
			}

			.param-check-box ul>li .active {
				background: #f1f2f4;
			}

			.param-check-box ul>li .radio-inline {
				border: 1px solid #ccc;
				padding: 0 10px;
			}

			.param-check-box .btn {
				text-shadow: none;
				line-height: 35px;
				padding: 0 12px;
				margin-right: 10px;
				background: #fff;
				box-shadow: none;
				border: 1px solid #ccc
			}

			.param-check-box .btn.active {
				background: #f1f2f4;
			}

			#pack_up {
				bottom: 10px;
				position: absolute;
				right: 10px;
			}

			@media screen and (max-width: 768px) {
				#lingyangList_page {
					padding: 0;
				}

				#lingyang-list2 {
					margin: 0;
				}

				.search-city {
					padding-right: 0;
				}

				#search-top {
					background: #f1f2f4;
					padding: 0 10px;
				}

				.w-box {
					background-color: #fff;
					margin: 10px auto;
					padding: 10px;
					width: 100%;
				}
			}

			.latest-works li {
				padding: 4px;
				width: 27%;
				overflow: hidden;
				position: relative;
				display: inline-block;
				margin: 0px 50px 30px -23px;
				background-color: #fff;
				border: 1px solid #e4e4e4;
			}

			.latest-works li .img-figure {
				margin: 0;
				z-index: 0;
				height: auto;
				overflow: hidden;
				position: relative;
			}

			.latest-works li .title-caption {
				left: 0;
				z-index: 2;
				width: 100%;
				bottom: 4px;
				height: auto;
				overflow: hidden;
				position: absolute;
			}

			.latest-works li .title-caption span {
				padding: 5px;
				color: #fff;
				font-size: 14px;
				position: relative;
				letter-spacing: 1px;
				background-color: rgb(227 224 226);
			}

			#backdrop {
				width: 100%;
				height: 100%;
				visibility: hidden;
				/*visible  hidden*/
				opacity: 0;
				/*1  0*/
				position: fixed;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
				background: rgba(8, 7, 7, 0.6);
				z-index: 100;
				transition: all .2s ease;
				backdrop-filter: saturate(180%) blur(1px);
			}

			#yincan {
				width: 160px;
				height: 110px;
				position: absolute;
				top: 70px;
				right: 46px;
				background-color: #fff;
				display: none;
			}
		</style>
		<!--/css-->
		<style>
			.page-container a,
			.page-container a:hover {
				color: #0c8687;
				font-size: 14px;
				text-decoration: none;
			}
		</style>
		<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no">
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="keywords" content="Petcare Responsive web template, Bootstrap Web Templates, Flat Web Templates, Android Compatible web template, 
Smartphone Compatible web template, free web designs for Nokia, Samsung, LG, SonyEricsson, Motorola web design" />
		<script type="application/x-javascript">
			addEventListener("load", function() {
				setTimeout(hideURLbar, 0);
			}, false);

			function hideURLbar() {
				window.scrollTo(0, 1);
			}
		</script>
		<script src="../js/jquery.min.js"></script>
		<script src="../js/modernizr.custom.js"></script>
		<script src="../js/responsiveslides.min.js"></script>
		<!-- <script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=SgoW5AbGKRdxnBga6gmIVWQZYXquhuSE"></script> -->
		<script type="text/javascript"
			src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=SgoW5AbGKRdxnBga6gmIVWQZYXquhuSE"></script>
		<script>
			// You can also use "$(window).load(function() {"
			$(function() {
				$("#slider2").responsiveSlides({
					auto: true,
					pager: true,
					speed: 300,
					namespace: "callbacks",
				});
			});
		</script>
	</head>
	<body>
		<!-- 模态框（Modal） -->
		<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
			aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
						<h4 class="modal-title" id="messagetitle" data-toggle="modal" data-target="#messageBox">发送领养请求
						</h4>
					</div>
					<div class="modal-body">
						<form onsubmit="return false" name="saveMessage">
							<input type="hidden" name="to" value="1133056">
							<textarea class="form-control" rows="3" name="message" id="adet"
								placeholder="描述家庭环境，及其家中宠物情况。"></textarea>
						</form>
					</div>
					<div class="modal-footer">
						<button type="submit" class="btn btn-success fsadopt"
							style="width: 100px;height: 40px;outline: none;">发送</button>
						<button type="button" class="btn btn-danger"
							style="margin-right: 20px;width: 100px;height: 40px;outline: none;"
							data-dismiss="modal">关闭</button>
					</div>
				</div><!-- /.modal-content -->
			</div><!-- /.modal -->
		</div>
		<div id="backdrop"></div>
		<!--header-->
		<div class="header">
			<div class="header-info">
				<div class="container">
					<div class="logo">
						<a href="index.html"><img src="../images/logo-pet.png" style="position: absolute;width: 330px;height: 262px;top: -60px;left: 280px;"/></a>
					</div>
					<div class="search-box">
						<form>
							<input type="text" name="s" class="textbox" placeholder="Search" required="">
							<input type="submit" value="">
						</form>
					</div>
					<div class="clearfix"> </div>
				</div>
			</div>
		</div>
		<div class="container">
			<div class="header-bottom">
				<div class="menu">
					<span class="menu-info"> </span>
					<ul class="cl-effect-21">
						<li id='oneser'><a id="service" href="index.html" class="active">服务中心</a>
							<div id="yican">
								<div>
									<p><a href="adopt.html">宠物领养</a></p>
									<p><a href="farmed.html">宠物寄养</a></p>
									<p><a href="notice.html">寻宠|招领</a></p>
								</div>
							</div>
						</li>
						<li><a href="petbaike.html">宠物百科</a></li>
						<li><a href="news.html">宠物新闻</a></li>
						<li><a href="bbs.html">宠物论坛</a></li>
						<li><a>关于我们</a></li>
						<li id="twoser">
							<a id="myme">个人中心</a>
							<div id="yincan">
								<div>
									<p><a href="myinfo.html">我的</a></p>
									<p><a id="overpet">注销</a></p>
								</div>
							</div>
						</li>
					</ul>
				</div>

				<!--yican -->
				<script>
					$("#service").mouseenter(function() {
						$("#yican").css("display", "block");
					});
					$("#oneser").mouseleave(function() {
						$("#yican").css("display", "none");
					});
					$("#myme").mouseenter(function() {
						$("#yincan").css("display", "block");
					});
					$("#twoser").mouseleave(function() {
						$("#yincan").css("display", "none");
					});
					//注销
					$("#overpet").click(function() {
						if (!confirm('是否确定注销该用户并退出登录？'))
							return;
						$.post('http://localhost:80/ct/remove', function(res) {
							if (res) {
								location.href = 'login.html';
							}
						});
					})
				</script>
				<!-- /yican -->
				<!--script-nav -->
				<script>
					$("span.menu-info").click(function() {
						$("ul.cl-effect-21").slideToggle("slow", function() {});
					});
				</script>
				<!-- /script-nav -->
				<div class="clearfix"> </div>
			</div>
		</div>
		<div class="page-container">
			<div class="row white-container" style="padding-top: 0;margin-top: 60px;">
				<!-- short-section-title -->
				<div class="col-md-12 clearfix short-section-title" style="border-bottom: 1px solid #f1f2f4; ">
					<h1 class="pull-left hidden-xs">
						<span class="text-danger" style="color: #0c8687;" id="atitle">一只折耳猫和三花猫</span>
					</h1>
					<div class="text-right operate" style="margin-top: 0px;border-top:1px solid #eee ">
						<span style="font-size: 14px;">
							<!--是否领养了-->
							<!-- <a href="javascript:void(0)" rel="nofollow" id="hasLingyang" data-id="1073750"><i
									class="fa fa-warning"></i> 已被领养</a> -->&nbsp;&nbsp;
							<span class="label label-warning hidden-xs"
								style="display: inline-block!important; ">免费领养</span>
						</span>
					</div>
				</div><!-- /short-section-title -->

				<!-- col-md-6 -->
				<div class="col-md-6">
					<img src="../images/4.jpg" id="img-adopt" width="450px" height="220px">
				</div><!-- /col-md-6 -->
				<!-- ========================================= OverView ========================================== -->
				<!-- col-md-6 -->
				<div class="col-md-6">
					<!-- project-OverView -->
					<div class="project-OverView" style="line-height: 30px;">
						<p>
							发布时间：<span id="adate">2023-08-12 20:48:06</span>
						</p>
						<p>
							宠物：<span><span id="upname">小米</span>&nbsp;&nbsp;<span id="bname">波斯猫</span>（<span
									id="upsex">母</span>）</span>
						</p>
						<p>
							宠物所在地： <a href="javascript:void(0)" id="baidumap" data-loc="" data-title=""><i
									class="fa fa-chevron-right"></i></a>
						</p>
						<p>
							联系电话：<a href="tel:18708312112" target="_blank" id="aphone"></a>
						</p>
						<p>
							<!-- 	<a href="adoptAdd.html" class="btn btn-info" style="background-color: #0C8687;"></a> -->
							<button class="btn btn-info wxlyt" data-toggle="modal" data-target="#myModal"
								style="background-color: #0C8687;outline: none;">我想领养它</button>
						</p>
					</div>
					<!-- /project-OverView -->
				</div><!-- /col-md-6 -->
				<div class="col-md-12" style="margin-top: 10px;">
					<div class="attention-box"
						style="border: 1px solid #ccc;border-left: 1px solid red;line-height: 30px;padding: 10px;font-size: 12px;">
						<p><span>详情：</span><span id="tedail"></span>
						<p>联系我时，请说明来自：you宠</p>
						<p style="color: red">
							安全提示：请不要相信任何需要金钱交易的无偿领养！例如宠物免费，骗取运费等常见骗术！
						</p>
					</div>

					<p class="visible-xs pull-right">
						<a href="#" data-toggle="modal" data-target="#jubaoBox"><i class="fa fa-warning"></i> 举报信息</a>
					</p>
				</div>
				<div class="container">
					<!-- row -->
					<div class="row">
						<!-- col-md-12 -->
						<div class="col-md-12">
							<!-- short-section-title -->
							<div class="short-section-title"
								style="line-height: 40px;width: 85%;margin: 10px 0;text-align: center;color: #999;border-bottom: 1px solid #f1f2f4;">
								<h3>向你推荐</h3>
							</div><!-- /short-section-title -->
						</div><!-- /col-md-12 -->
					</div>
					<div class="row">
						<!-- latest-works -->
						<ul class="latest-works related-projects">
							<li>
								<div class="img-figure">
									<a href="" title="2个月乖巧纯白弟弟免..."><img
											src="http://i1.bagong.cn/ab/05/7158a4a8e454f2f9d7f06b8071e4_350x260_7.jpg"
											class="img-responsive" alt="2个月乖巧纯白弟弟免..."></a>
								</div>
								<div class="title-caption">
									<span><a href="" title="2个月乖巧纯白弟弟免...">2个月乖巧纯白弟弟免...</a></span>
								</div>
							</li>
						</ul>
					</div><!-- /row -->
				</div>
			</div>
		</div>
		<!--/header-->
		<!--footer-->
		<div class="footer">
			<div class="container">
				<div class="copy-rights">
					<p>Copyright &copy; 2023.Company <a target="_blank" href="index.html">you宠</a></p>
				</div>

			</div>
		</div>
		<!-- 详情信息显示 -->
		<script type="text/javascript">
			//自定义promise方法
			function getPromise(url, data) {
				return new Promise(function(resolve, reject) {
					$.post(url, data, function(res) {
						resolve(res);
					}, "json").fail(function(err) {
						reject(err);
					})
				});
			}
			$(function() {
				let temp = new URLSearchParams(location.search);
				let aid = temp.get("aid"); //领养编号	

				//显示当前领养详情
				getPromise('http://localhost:80/ct/adetail', {
					"aid": aid
				}).then(function(res) {
					$("#atitle").text(res.atitle);
					$("#adate").text(res.adate);
					$("#baidumap").text(res.address);
					$("#aphone").text(res.aphone);
					$("#tedail").text(res.adetail);
					$(".fsadopt").attr("aid", res.aid);
					$(".fsadopt").attr("uid", res.a_uid);
					$("#img-adopt").attr('src', "../images/" + res.afile + "");
					let upid = res.upid;
					return getPromise('http://localhost:80/ct/petdetail', {
						"upid": upid
					});
				}).then(function(res) {
					$("#upname").text(res.upname);
					$("#upsex").text(res.upsex);
					let bid = res.up_bid;
					return getPromise('http://localhost:80/ct/petinfoOne', {
						"bid": bid
					});
				}).then(function(res) {
					$("#bname").text(res.bname);
				})


				//显示当前领养详情
				//adoptdetail();
				// function adoptdetail() {
				// 	//获取求领养详情
				// 	$.post('http://localhost:80/ct/adetail', {
				// 		"aid": aid
				// 	}, function(r) {
				// 		$("#atitle").text(r.atitle);
				// 		$("#adate").text(r.adate);
				// 		$("#baidumap").text(r.address);
				// 		$("#aphone").text(r.aphone);
				// 		$("#tedail").text(r.adetail);
				// 		$("#img-adopt").attr('src', "../images/" + r.afile + "");
				// 		let upid = r.upid;
				// 		$.post('http://localhost:80/ct/petdetail', {
				// 			"upid": upid
				// 		}, function(re) {
				// 			$("#upname").text(re.upname);
				// 			$("#upsex").text(re.upsex);
				// 			let bid = re.up_bid;
				// 			$.post('http://localhost:80/ct/petinfoOne', {
				// 				"bid": bid
				// 			}, function(res) {
				// 				$("#bname").text(res.bname);
				// 			}, "json");
				// 		}, "json");
				// 	}, "json");
				// }

				//推荐求领养
				tjadopt();

				function tjadopt() {
					$.post('http://localhost:80/ct/tjadopt', function(r) {
						$(".related-projects").children().remove();
						$(r.records).each(function(i, e) {
							let str = e.atitle;
							if (str.length > 10) {
								str = str.slice(0, 10) + "...";
							}
							let lis = "<li>" +
								"<div class='img-figure'>" +
								"<a href='AdoptDetails.html?aid=" + e.aid + "' title='" + str + "'>" +
								"<img src='../images/" + e.afile + "' class='img-responsive' alt='" +
								str + "' style='width: 296px;height: 196px;'></a>" +
								"</div>" +
								"<div class='title-caption'>" +
								"<span><a href='AdoptDetails.html?aid=" + e.aid + "' title='" + str +
								"'>" + str + "</a></span>" +
								"</div>" +
								"</li>";
							$(".related-projects").append(lis);
						});
					}, "json");
				}

				//点击发送求领养请求
				$(".fsadopt").click(function() {
					let aid = $(this).attr("aid"); //
					let uid = $(this).attr("uid"); //接收用户
					let detail = $("#adet").val(); //详情
                    $.post('http://localhost:80/ct/yzadopt', {
                    	"uid": uid
                    }, function(r) {
                    	if (r) {
                    		alert("不能给自己发送请求！");
                    		return;
                    	}else{
							$.post('http://localhost:80/ct/fsadopt', {
								"uid": uid,
								"aid": aid,
								"fid":0,
								"seekid":0,
								"detail": detail
							}, function(r) {
								if (r) {
									alert("发送成功！");
								} else {
									alert("发送失败！");
								}
								location.href = 'adopt.html';
							}, "json");
						}
                    }, "json");
				})


			})	
		</script>



		<!--/footer-->
		<style>
			#pet-map {
				width: 88%;
				position: absolute;
				top: 4%;
				left: 6%;
				z-index: 999;
				background-color: #fff;
				visibility: hidden;
				opacity: 0;

			}

			#l-map {
				height: 800px;
				width: 1000px;
				float: left;
				border: 2px #ddd solid;
			}

			#r-result,
			#searchResultPanel {
				width: 40%;
				height: 50px;
				float: right;
				line-height: 50px;
				font-size: 18px;
			}

			#r-result input {
				border: 1px #ddd solid;
				border-radius: 5px;
			}

			#container-map {
				height: 800px;
				width: 100%;
			}

			#tangram-suggestion--TANGRAM__1-main {
				z-index: 999;
			}

			.default {
				width: 80px;
				background-color: #0c8687;
				height: 30px;
				border: none;
				color: #fff;
				position: absolute;
				bottom: 2%;
				right: 2%;
			}

			#route,
			#route1,
			#route2 {
				width: 40%;
				height: 200px;
				float: right;
			}

			.navtrans-table {
				display: none;
			}
		</style>
		<div id="pet-map">
			<!-- <div id="container-map"></div> -->
			<div id="l-map"></div>
			<div id="r-result">请输入查找地址:<input type="text" id="suggestId" size="20" value="百度"
					style="width:200px;outline:none;height: 20px;" /></div>
			<div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>
			<div id='route'>
				<div
					style='font: 12px Arial, Helvetica, &quot;PingFang SC&quot;, &quot;Hiragino Sans GB&quot;, STHeiti, sans-serif; background: rgb(255, 255, 255);'>
					<h2
						style='margin:0;border-top:1px solid #e4e6e7;padding:10px 0 9px 7px;font:bold 16px Arial,Helvetica,'>
						骑行前往 <span id='qxdz'>贡井区</span> 的路线</h2>
					<div class='navtrans-view expand'
						style='position:relative;color:#7777cc;background:#e5ecf9;height:53px;overflow:hidden;text-align:right'>
						<span class='suggest-plan'>推荐</span>
						<div class='suggest-plan-des'><span id='qxgl'>1183.7公里</span>&nbsp;|&nbsp;<span id='qxtime'>4
								天3小时</span></div>
					</div>
					<div class='navtrans-res'>
						<div style='border-top:1px solid #e4e6e7'>
							<div style='cursor:pointer;padding:8px 0 8px 10px;line-height:15px'>
								<span class='navtrans-navlist-icon nav-st'></span>
								<div style='overflow:hidden;line-height:20px;' id='qxstartdz'>永州市第一中学</div>
							</div>
						</div>
						<div>
							<div style='cursor:pointer;padding:8px 0 8px 10px;line-height:15px'>
								<span class='navtrans-navlist-icon nav-ed'></span>
								<div style='overflow:hidden;line-height:20px;' id='qxenddz'>贡井区</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<button class="default">返回</button>

			<div id='route1'>
				<div
					style='font: 12px Arial, Helvetica, &quot;PingFang SC&quot;, &quot;Hiragino Sans GB&quot;, STHeiti, sans-serif; background: rgb(255, 255, 255);'>
					<h2
						style='margin:0;border-top:1px solid #e4e6e7;padding:10px 0 9px 7px;font:bold 16px Arial,Helvetica,'>
						驾车前往 <span id='dz'>贡井区</span> 的路线</h2>
					<div class='navtrans-view expand'
						style='position:relative;color:#7777cc;background:#e5ecf9;height:53px;overflow:hidden;text-align:right'>
						<span class='suggest-plan'>推荐</span>
						<div class='suggest-plan-des'><span id='gl'>1183.7公里</span>&nbsp;|&nbsp;<span id='time'>4
								天3小时</span></div>
					</div>
					<div class='navtrans-res'>
						<div style='border-top:1px solid #e4e6e7'>
							<div style='cursor:pointer;padding:8px 0 8px 10px;line-height:15px'>
								<span class='navtrans-navlist-icon nav-st'></span>
								<div style='overflow:hidden;line-height:20px;' id='startdz'>永州市第一中学</div>
							</div>
						</div>
						<div>
							<div style='cursor:pointer;padding:8px 0 8px 10px;line-height:15px'>
								<span class='navtrans-navlist-icon nav-ed'></span>
								<div style='overflow:hidden;line-height:20px;' id='enddz'>贡井区</div>
							</div>
						</div>
					</div>
				</div>
			</div>

			<div id='route2'>
				<div
					style='font: 12px Arial, Helvetica, &quot;PingFang SC&quot;, &quot;Hiragino Sans GB&quot;, STHeiti, sans-serif; background: rgb(255, 255, 255);'>
					<h2
						style='margin:0;border-top:1px solid #e4e6e7;padding:10px 0 9px 7px;font:bold 16px Arial,Helvetica,'>
						坐公交前往 <span id='bxdz'>贡井区</span> 的路线</h2>
					<div class='navtrans-view expand'
						style='position:relative;color:#7777cc;background:#e5ecf9;height:53px;overflow:hidden;text-align:right'>
						<span class='suggest-plan'>推荐</span>
						<div class='suggest-plan-des'><span id='bxgl'>1183.7公里</span>&nbsp;|&nbsp;<span id='bxtime'>4
								天3小时</span></div>
					</div>
					<div class='navtrans-res'>
						<div style='border-top:1px solid #e4e6e7'>
							<div style='cursor:pointer;padding:8px 0 8px 10px;line-height:15px'>
								<span class='navtrans-navlist-icon nav-st'></span>
								<div style='overflow:hidden;line-height:20px;' id='bxstartdz'>永州市第一中学</div>
							</div>
						</div>
						<div>
							<div style='cursor:pointer;padding:8px 0 8px 10px;line-height:15px'>
								<span class='navtrans-navlist-icon nav-ed'></span>
								<div style='overflow:hidden;line-height:20px;' id='bxenddz'>贡井区</div>
							</div>
						</div>
					</div>
				</div>
			</div>

		</div>

		<!-- 地图功能 -->
		<script>
			$(function() {
				//加载搜索框
				$("#r-result input").attr("style", "width: 240px;height: 30px;outline:none");

				$("#baidumap").click(function() {
					$("#pet-map").css("opacity", "1");
					$("#pet-map").css("visibility", "visible");
					$("#backdrop").css("visibility", "visible");
					$("#backdrop").css("opacity", "1");
				})
				$(".default").click(function() {
					$("#pet-map").css("opacity", "0");
					$("#pet-map").css("visibility", "hidden");
					$("#backdrop").css("visibility", "hidden");
					$("#backdrop").css("opacity", "0");
				})
			})
		</script>
		<script type="text/javascript">
			// 百度地图API功能
			function G(id) {
				return document.getElementById(id);
			}
			var map = new BMapGL.Map("l-map");
			//当前城市	
			map.centerAndZoom($("#baidumap").text(), 12); // 初始化地图,设置城市和地图级别。

			map.enableScrollWheelZoom(true);
			var ac = new BMapGL.Autocomplete( //建立一个自动完成的对象
				{
					"input": "suggestId",
					"location": map
				});

			ac.addEventListener("onhighlight", function(e) { //鼠标放在下拉列表上的事件
				var str = "";
				var _value = e.fromitem.value;
				var value = "";
				if (e.fromitem.index > -1) {
					value = _value.province + _value.city + _value.district + _value.street + _value.business;
				}
				str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;

				value = "";
				if (e.toitem.index > -1) {
					_value = e.toitem.value;
					value = _value.province + _value.city + _value.district + _value.street + _value.business;
				}
				str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
				G("searchResultPanel").innerHTML = str;
			});

			var myValue;
			ac.addEventListener("onconfirm", function(e) { //鼠标点击下拉列表后的事件
				var _value = e.item.value;
				myValue = _value.province + _value.city + _value.district + _value.street + _value.business;
				G("searchResultPanel").innerHTML = "onconfirm<br />index = " + e.item.index + "<br />myValue = " +
					myValue;

				setPlace();
			});

			function setPlace() {
				map.clearOverlays(); //清除地图上所有覆盖物
				function myFun() {
					var pp = local.getResults().getPoi(0).point; //获取第一个智能搜索的结果
					map.centerAndZoom(pp, 18);
					map.addOverlay(new BMapGL.Marker(pp)); //添加标注
				}
				var local = new BMapGL.LocalSearch(map, { //智能搜索
					onSearchComplete: myFun
				});
				local.search(myValue);
			}


			//声明四个变量，保存出发点和结束点的经纬度信息，直接使用两个变量保存点也可以
			var slng = 0,
				slat = 0,
				elng = 0,
				elat = 0;

			var myGeo = new BMapGL.Geocoder();
			//拿到起始坐标
			myGeo.getPoint(
				$("#useraddress").val(),
				function(point) {
					//在方法中给变量赋值
					slng = point.lng;
					slat = point.lat;
					map.addOverlay(new BMapGL.Marker(point));
					map.centerAndZoom(point, 15);
				},
				map
			);
			//拿到终点坐标
			myGeo.getPoint(
				$("#baidumap").text(),
				function(point) {
					elng = point.lng;
					elat = point.lat;
					map.addOverlay(new BMapGL.Marker(point));
					map.centerAndZoom(point, 15);
				},
				map
			);

			//驾车导航
			function creatLine() {
				//在此处判断是否赋值，如果赋值成功，异步刷新回调，那么四个值均不为初始值，若有值没有赋值成功则使用定时器重复刷新此函数
				if (slng != 0 && slat != 0 && elng != 0 && elat != 0) {
					//创建开始点和结束点，如果在前面不是获取经纬度，而是直接获取点，那么可以省略这一步
					var start = new BMapGL.Point(slng, slat),
						end = new BMapGL.Point(elng, elat);
					var searchComplete = function(results) {
						if (driving.getStatus() != BMAP_STATUS_SUCCESS) {
							return;
						}
						var plan = results.getPlan(0);
						$("#dz").text($("#baidumap").text());
						$("#startdz").text($("#useraddress").val());
						$("#enddz").text($("#baidumap").text());
						$("#gl").text(plan.getDistance(true)); //获取距离
						$("#time").text(plan.getDuration(true)); //获取时间
					}

					//渲染驾车路线
					var driving = new BMapGL.DrivingRoute(map, {
						renderOptions: {
							map: map,
							autoViewport: true
						},
						onSearchComplete: searchComplete
					});
					driving.search(start, end);
				} else {
					//如果没有赋值，则重复刷新此函数代码，直到赋值成功完成渲染
					setTimeout("creatLine()", 100);
				}
			}
			creatLine();

			var searchComplete1 = function(results) {
				if (riding.getStatus() != BMAP_STATUS_SUCCESS) {
					return;
				}
				var plan = results.getPlan(0);
				var jl = plan.getDistance(true);
				var jl1 = jl.substr(0, jl.indexOf("公里", 1));
				if (jl1 > 100) {
					$("#route").css("display", "none");
				}
				$("#qxdz").text($("#baidumap").text());
				$("#qxstartdz").text($("#useraddress").val());
				$("#qxenddz").text($("#baidumap").text());
				$("#qxgl").text(jl); //获取距离
				$("#qxtime").text(plan.getDuration(true)); //获取时间
			}
			//骑行
			var riding = new BMapGL.RidingRoute(map, {
				renderOptions: {
					map: map,
					// panel: "route",
					autoViewport: true
				},
				onSearchComplete: searchComplete1
			});
			riding.search($("#useraddress").val(), $("#baidumap").text());

			//拿到起始坐标
			myGeo.getPoint(
				$("#useraddress").val(),
				function(point) {
					//在方法中给变量赋值
					slng = point.lng;
					slat = point.lat;
					map.addOverlay(new BMapGL.Marker(point));
					map.centerAndZoom(point, 15);
				},
				map
			);
			//拿到终点坐标
			myGeo.getPoint(
				$("#baidumap").text(),
				function(point) {
					elng = point.lng;
					elat = point.lat;
					map.addOverlay(new BMapGL.Marker(point));
					map.centerAndZoom(point, 15);
				},
				map
			);

			function cre() {
				if (slng != 0 && slat != 0 && elng != 0 && elat != 0) {
					var start = new BMapGL.Point(slng, slat);
					var end = new BMapGL.Point(elng, elat);
					var serct = function(results) {
						if (transit.getStatus() != BMAP_STATUS_SUCCESS) {
							return;
						}
						var plan = results.getPlan(0);
						var gl = plan.getDistance(true);
						var gl1 = gl.substr(0, gl.indexOf("公里", 1));
						if (gl1 > 25) {
							$("#route2").css("display", "none");
						}
						$("#bxdz").text($("#baidumap").text());
						$("#bxstartdz").text($("#useraddress").val());
						$("#bxenddz").text($("#baidumap").text());
						$("#bxgl").text(gl); //获取距离
						$("#bxtime").text(plan.getDuration(true)); //获取时间
					};
					//公交
					var transit = new BMapGL.TransitRoute(map, {
						renderOptions: {
							map: map
						},
						onSearchComplete: serct
					});
					transit.search(start, end);
				} else {
					setTimeout("cre()", 100);
				}
			}
			cre();
		</script>
		<script>
			//     var map = new BMapGL.Map("container-map");          // 创建地图实例 
			//     var point = new BMapGL.Point(116.404, 39.915);  // 创建点坐标 
			//     map.centerAndZoom(point, 15);                 // 初始化地图，设置中心点坐标和地图级别
			//     map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
			//     map.setHeading(64.5);   //设置地图旋转角度
			//     map.setTilt(73);       //设置地图的倾斜角度

			//驾车
			// transit.search($("#useraddress").val(), $("#baidumap").text());
			// 
		</script>
	</body>
</html>